<template>
  <el-button @click="dialogFormVisible = true">添加操作人员</el-button>
  <el-divider />
  <el-table :data="operList" height="600px" style="width: 100%">
    <el-table-column prop="adminid" label="编号" width="180" />
    <el-table-column prop="adminname" label="账号" width="180">
    </el-table-column>
    <el-table-column label="角色">
      <template #default="scope">
        <span>{{ roles.filter(item => item.value === scope.row.role)[0]?.label }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="deleteOper(scope.row)">删除</el-button>
        <el-button type="danger" @click="editOper(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="添加操作人员">
    <AddOper @onOk="addOkFn" @onCancel="addCancelFn"></AddOper>
  </el-dialog>
  <el-dialog v-model="editVisible" title="修改操作人员">
    <EditOper :editadminname="editadminname"  @onOk="editOkFn" @onCancel="editCancelFn" ></EditOper>
  </el-dialog>
</template>
  
<script lang="ts" setup>
// import { getOPeratorListApi, deleteOperatorApi } from "@/api/user";
import * as api from "@/api/user";
import {  reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IOper } from "@/myTypes"
import { roles } from "./data";
import AddOper from "./AddOper.vue";
import EditOper from "./EditOper.vue";

//一、 获取操作人员
const operList = reactive<Array<IOper>>([]);

function getOperList() {
  api.getOPeratorListApi().then(res => {
    if (res.data.code === "200") {
      operList.length = 0;
      operList.push(...res.data.data);
    }
  }).catch(err => {
    console.log("获取操作人员失败，err", err);
  })
}
getOperList();


//二、 添加相关：
const dialogFormVisible = ref(false)

// 关闭添加的窗口
const closeAddWin = () => {
  dialogFormVisible.value = false;
}
// 添加页面的确定（成功）的函数
const addOkFn = () => {
  closeAddWin();
  getOperList();
};

// 添加页面取消的函数
const addCancelFn = () => {
  closeAddWin();
}

//三、 删除操作人员
const deleteOper = (row: IOper) => {
  ElMessageBox.confirm("确定删除该操作人员吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      api.deleteOperatorApi(row.adminid as string).then(res => {
        if (res.data.code === "200") {
          ElMessage({
            type: "success",
            message: "删除成功"
          });
          getOperList();
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除"
      });
    });
};


//四、修改操作人员

// 修改的人员信息：
const editadminname = ref("");

const editVisible = ref(false);

const editOper=(row:IOper)=>{
  editVisible.value=true;
  editadminname.value = (row.adminname as string);
}

const editOkFn=()=>{
  editVisible.value=false;
  getOperList();
}

const editCancelFn=()=>{
  editVisible.value=false;
}

</script>

<style lang="scss" scoped>
.img {
  width: 100%;
  height: 100px;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}</style>
